<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表头固定滚动表格JS包</title>
    <style>
        body{
            font-size:14px;
            line-height:1.5;
        }
        table{
            width:100%;
            border-spacing:0;
            border-collapse:collapse;
            text-align:left;
         }
        table>thead>tr>th,table>tbody>tr>td{
            box-sizing: border-box;
            padding:8px 5px;
            border:1px solid #ddd;
        }
        .g-fontBold{
            font-weight:bold;
        }
        .ml_left{
            box-sizing:border-box;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            width:290px;
            padding:0 15px;
            line-height:1.8;
            background-color:#444;
            color:#fff;
            overflow-y:auto;
        }
        .ml_top{
            position:fixed;
            top:10px;
            right:10px;
            bottom:200px;
            left:300px;
            border:1px solid #ddd;
            overflow-y:auto;
        }
        .ml_bottom{
            position:fixed;
            right:10px;
            bottom:10px;
            left:300px;
            height:180px;
            border:1px solid #ddd;
            overflow-y:auto;
        }
        p{
            text-indent:2em;
        }
        .ml_before::before{
            content:"> "
        }
        pre{
            width:100%;
            overflow-x:auto;
        }
    </style>
</head>
<body>
<div class="ml_left">
    <h1>表头固定滚动表格JS包</h1>
    <ul>
        <li>
            <h2>调用</h2>
            <div>
                <pre>
&lt;script src="./resources/js/ml_fixTableHead.js"&gt;&lt;/script&gt;
ml.fixTableHead({
  el:"[data-ml='ii']",
  bgColor:"#f0f0f0"
});
                </pre>
                <h3>参数：</h3>
                <ul>
                    <li>
                        <h4 class="g-fontBold">el:</h4>
                        <div class="ml_before">类型：string，必填</div>
                        <div class="ml_before">需要固定表头的table元素</div>
                        <div class="ml_before">eg："#id"、".class"、"[data-ml='ml']"、"table"</div>
                    </li>
                    <li>
                        <h4 class="g-fontBold">bgColor:</h4>
                        <div class="ml_before">类型：string，选填</div>
                        <div class="ml_before">默认值："#fff"</div>
                        <div class="ml_before">需要固定表头的table元素</div>
                        <div class="ml_before">eg："#id"、".class"、"[data-ml='ml']"、"table"</div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>
<div class="ml_top">
    <table data-ml="ii" class="table table-bordered">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>家庭住址</th>
            <th>捉住一只不正经的标题</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Maram Lee</td>
            <td>秘密</td>
            <td>地球</td>
            <td>配上一只不正经的内容</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        <tr>
            <td>亲</td>
            <td>秘密</td>
            <td>火星</td>
            <td>好几万伏大灯泡……</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="ml_bottom">
    <table data-ml="ii" class="table table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>为啥</th>
            <th>是这样</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>#</td>
            <td>style为啥不单独引入？</td>
            <td>难得多建个文件</td>
        </tr>
        <tr>
            <td>#</td>
            <td>界面好丑</td>
            <td>你说得对！</td>
        </tr>
        <tr>
            <td>#</td>
            <td>bug？</td>
            <td>我改~</td>
        </tr>
        <tr>
            <td>#</td>
            <td>你说啥？</td>
            <td>哦。</td>
        </tr>
        <tr>
            <td>#</td>
            <td>你说啥？</td>
            <td>哦。</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="ml_fixTableHead.js"></script>
<script>
ml.fixTableHead({el:"[data-ml='ii']",bgColor:"#f0f0f0"});
</script>
<script>
</script>
</body>
</html>